<template>
    <div>
        <el-button type="primary" size="mini" @click="dialogVisible = true">设置</el-button>

        <el-dialog
            title="审核设置"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <div class="row"><div class="label">集团名称：<i style="color: red">*</i></div><el-input v-model="input" placeholder="最多输入30个字" maxlength="30" style="width: 300px"></el-input></div>
            <div class="cengjitu">
                <div class="top1"><span>组织层级</span><span>自动审核</span></div>
                <div class="content1">
                    <div v-for="item in shenhe"><div class="label">{{item.label}}</div><div><el-checkbox v-model="item.checked"></el-checkbox></div></div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "shenhe_sezhi",
        data() {
            return {
                dialogVisible: false,
                input: '代理商一',
                shenhe:[{label:'代理商',checked:true},{label:'集团',checked:false},{label:'品牌',checked:false},{label:'门店',checked:false},{label:'外来单位',checked:false}],
            };
        },
        methods: {
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            }
        }
    }
</script>

<style lang="less" scoped>
    .row{
        display: flex;
        width: 400px;
        flex-direction: row;
        justify-content: flex-start;
        margin: 10px auto;
        .label{
            width: 120px;
            line-height: 32px;
        }
    }
    .cengjitu{
            width: 400px;
            margin: 0px auto;
            .top1{
                width: 100%;
                height: 32px;
                span{
                    width: 200px;
                    float: left;
                    background: #dedede;
                    line-height: 32px;
                    text-align: center;
                }
            }
            .content1{
                display: flex;
                flex-direction: column;
                div{
                    line-height: 46px;
                    border: 1px solid #dedede;
                    border-top: 0px;
                    display: flex;
                    flex-direction: row;
                    div{
                        flex: 1;
                        justify-content: center;
                    }
                }
        }
    }
</style>
